<%@ page errorPage="/error.jsp" pageEncoding="UTF-8" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<head>
	<!-- jquery.dataTables.min -->
	<script src="<spring:url value="/resources/styles/themes/admin/js/libs/jquery.dataTables.min.js" />"></script>
	<script>
	
		// Search tip
		$(document).ready(function()
		{
			$('#s').tip({
				content: 'AJAX search! Try entering "add"',
				onHover: false
			});
			
			/*
			 * Table sorting
			 */
			
			// A small classes setup...
			$.fn.dataTableExt.oStdClasses.sWrapper = 'no-margin last-child';
			$.fn.dataTableExt.oStdClasses.sInfo = 'message no-margin';
			$.fn.dataTableExt.oStdClasses.sLength = 'float-left';
			$.fn.dataTableExt.oStdClasses.sFilter = 'float-right';
			$.fn.dataTableExt.oStdClasses.sPaging = 'sub-hover paging_';
			$.fn.dataTableExt.oStdClasses.sPagePrevEnabled = 'control-prev';
			$.fn.dataTableExt.oStdClasses.sPagePrevDisabled = 'control-prev disabled';
			$.fn.dataTableExt.oStdClasses.sPageNextEnabled = 'control-next';
			$.fn.dataTableExt.oStdClasses.sPageNextDisabled = 'control-next disabled';
			$.fn.dataTableExt.oStdClasses.sPageFirst = 'control-first';
			$.fn.dataTableExt.oStdClasses.sPagePrevious = 'control-prev';
			$.fn.dataTableExt.oStdClasses.sPageNext = 'control-next';
			$.fn.dataTableExt.oStdClasses.sPageLast = 'control-last';
			
			// Apply to table
			$('.sortable').each(function(i)
			{
				// DataTable config
				var table = $(this),
					oTable = table.dataTable({
						/*
						 * We set specific options for each columns here. Some columns contain raw data to enable correct sorting, so we convert it for display
						 * @url http://www.datatables.net/usage/columns
						 */
						aoColumns: [
							{ bSortable: false },	// No sorting for this columns, as it only contains checkboxes
							{ sType: 'string' },
							{ bSortable: false },
							{ sType: 'numeric', bUseRendered: false, fnRender: function(obj) // Append unit and add icon
								{
									return '<small><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/image.png" />" width="16" height="16" class="picto"> '+obj.aData[obj.iDataColumn]+' Ko</small>';
								}
							},
							{ sType: 'date' },
							{ sType: 'numeric', bUseRendered: false, fnRender: function(obj) // Size is given as float for sorting, convert to format 000 x 000
								{
									return obj.aData[obj.iDataColumn].split('.').join(' x ');
								}
							},
							{ bSortable: false }	// No sorting for actions column
						],
						
						/*
						 * Set DOM structure for table controls
						 * @url http://www.datatables.net/examples/basic_init/dom.html
						 */
						sDom: '<"block-controls"<"controls-buttons"p>>rti<"block-footer clearfix"lf>',
						
						/*
						 * Callback to apply template setup
						 */
						fnDrawCallback: function()
						{
							this.parent().applyTemplateSetup();
						},
						fnInitComplete: function()
						{
							this.parent().applyTemplateSetup();
						}
					});
				
				// Sorting arrows behaviour
				table.find('thead .sort-up').click(function(event)
				{
					// Stop link behaviour
					event.preventDefault();
					
					// Find column index
					var column = $(this).closest('th'),
						columnIndex = column.parent().children().index(column.get(0));
					
					// Send command
					oTable.fnSort([[columnIndex, 'asc']]);
					
					// Prevent bubbling
					return false;
				});
				table.find('thead .sort-down').click(function(event)
				{
					// Stop link behaviour
					event.preventDefault();
					
					// Find column index
					var column = $(this).closest('th'),
						columnIndex = column.parent().children().index(column.get(0));
					
					// Send command
					oTable.fnSort([[columnIndex, 'desc']]);
					
					// Prevent bubbling
					return false;
				});
			});
		});
	
	</script>
</head>

<body>
	<article class="container_12">
		
		<section class="grid_12">
			<div class="block-border"><form class="block-content form" id="table_form" method="post" action="">
				<h1>Table</h1>
				
				<div class="block-controls">
					
					<ul class="controls-buttons">
						<li><a href="javascript:void(0)" title="Previous"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/navigation-180.png" />" width="16" height="16"> Prev</a></li>
						<li><a href="javascript:void(0)" title="Page 1"><b>1</b></a></li>
						<li><a href="javascript:void(0)" title="Page 2" class="current"><b>2</b></a></li>
						<li><a href="javascript:void(0)" title="Page 3"><b>3</b></a></li>
						<li><a href="javascript:void(0)" title="Page 4"><b>4</b></a></li>
						<li><a href="javascript:void(0)" title="Page 5"><b>5</b></a></li>
						<li><a href="javascript:void(0)" title="Next">Next <img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/navigation.png" />" width="16" height="16"></a></li>
						<li class="sep"></li>
						<li><a href="javascript:void(0)"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/arrow-circle.png" />" width="16" height="16"></a></li>
					</ul>
					
				</div>
			
				<div class="no-margin"><table class="table" cellspacing="0" width="100%">
				
					<thead>
						<tr>
							<th class="black-cell"><span class="loading"></span></th>
							<th scope="col">
								<span class="column-sort">
									<a href="javascript:void(0)" title="Sort up" class="sort-up active"></a>
									<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
								</span>
								Title
							</th>
							<th scope="col">Keywords</th>
							<th scope="col">Preview</th>
							<th scope="col">
								<span class="column-sort">
									<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
									<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
								</span>
								Date
							</th>
							<th scope="col">
								<span class="column-sort">
									<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
									<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
								</span>
								Size
							</th>
							<th scope="col" class="table-actions">Actions</th>
						</tr>
					</thead>
					
					<tbody>
						
						<tr>
							<th scope="row" class="table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-1" value="1"></th>
							<td>Lorem ipsum sit amet</td>
							<td><ul class="keywords">
								<li><a href="javascript:void(0)">Ocean</a></li>
								<li class="orange-keyword"><a href="javascript:void(0)">Sun</a></li>
							</ul></td>
							<td><a href="javascript:void(0)"><small><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/image.png" />" width="16" height="16" class="picto"> jpg | 12 Ko</small></a></td>
							<td>02-05-2010</td>
							<td>320 x 240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<th scope="row" class="table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-2" value="2"></th>
							<td>Consectetur adipisicing elit</td>
							<td><ul class="keywords">
								<li class="purple-keyword">People</li>
							</ul></td>
							<td><a href="javascript:void(0)"><small><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/image.png" />" width="16" height="16" class="picto"> jpg | 14 Ko</small></a></td>
							<td>10-10-2010</td>
							<td>640 x 480</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<th scope="row" class="table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-3" value="3"></th>
							<td>Sed do eiusmod tempor</td>
							<td><ul class="keywords">
								<li>Sea</li>
								<li>Fish</li>
								<li>Bubble</li>
							</ul></td>
							<td><a href="javascript:void(0)"><small><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/image.png" />" width="16" height="16" class="picto"> jpg | 9 Ko</small></a></td>
							<td>24-03-2010</td>
							<td>320 x 240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<th scope="row" class="table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-4" value="4"></th>
							<td>Incididunt</td>
							<td class="empty">(none)</td>
							<td><a href="javascript:void(0)"><small><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/image.png" />" width="16" height="16" class="picto"> jpg | 21 Ko</small></a></td>
							<td>02-10-2010</td>
							<td>320 x 240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<th scope="row" class="table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-5" value="5"></th>
							<td>Ut labore et dolore magna</td>
							<td><ul class="keywords">
								<li>Ocean</li>
							</ul></td>
							<td><a href="javascript:void(0)"><small><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/image.png" />" width="16" height="16" class="picto"> jpg | 20 Ko</small></a></td>
							<td>21-07-2010</td>
							<td>320 x 240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
					</tbody>
				
				</table></div>
				
				<ul class="message no-margin">
					<li>Results 1 - 5 out of 23</li>
				</ul>
				
				<div class="block-footer">
					<div class="float-right">
						<label for="table-display" style="display:inline">Display mode</label>
						<select name="table-display" id="table-display" class="small">
							<option value="table">Table</option>
							<option value="grid">Grid</option>
						</select>
					</div>
					
					<img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/arrow-curve-000-left.png" />" width="16" height="16" class="picto">
					<a href="javascript:void(0)" class="button">Select All</a>
					<a href="javascript:void(0)" class="button">Unselect All</a>
					<span class="sep"></span>
					<select name="table-action" id="table-action" class="small">
						<option value="">Action for selected...</option>
						<option value="validate">Validate</option>
						<option value="delete">Delete</option>
					</select>
					<button type="submit" class="small">Ok</button>
				</div>
					
			</form></div>
		</section>
		
		<section class="grid_12">
			<div class="block-border"><form class="block-content form" id="table_form" method="post" action="">
				<h1>Sortable table</h1>
			
				<table class="table sortable no-margin" cellspacing="0" width="100%">
				
					<thead>
						<tr>
							<th class="black-cell"><span class="loading"></span></th>
							<th scope="col">
								<span class="column-sort">
									<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
									<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
								</span>
								Title
							</th>
							<th scope="col">Keywords</th>
							<th scope="col">
								<span class="column-sort">
									<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
									<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
								</span>
								Preview
							</th>
							<th scope="col">
								<span class="column-sort">
									<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
									<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
								</span>
								Date
							</th>
							<th scope="col">
								<span class="column-sort">
									<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
									<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
								</span>
								Size
							</th>
							<th scope="col" class="table-actions">Actions</th>
						</tr>
					</thead>
					
					<tbody>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-1" value="1"></td>
							<td>Lorem ipsum sit amet</td>
							<td><ul class="keywords">
								<li><a href="javascript:void(0)">Ocean</a></li>
								<li class="orange-keyword"><a href="javascript:void(0)">Sun</a></li>
							</ul></td>
							<td>12</td>
							<td>2010-05-02</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-2" value="2"></td>
							<td>Consectetur adipisicing elit</td>
							<td><ul class="keywords">
								<li class="purple-keyword">People</li>
							</ul></td>
							<td>14</td>
							<td>2010-10-10</td>
							<td>640.480</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-3" value="3"></td>
							<td>Sed do eiusmod tempor</td>
							<td><ul class="keywords">
								<li>Sea</li>
								<li>Fish</li>
								<li>Bubble</li>
							</ul></td>
							<td>9</td>
							<td>2010-03-24</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-4" value="4"></td>
							<td>Incididunt</td>
							<td class="empty">(none)</td>
							<td>21</td>
							<td>2010-10-02</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-5" value="5"></td>
							<td>Ut labore et dolore magna</td>
							<td><ul class="keywords">
								<li>Ocean</li>
							</ul></td>
							<td>20</td>
							<td>2010-07-21</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-1" value="1"></td>
							<td>Aliqua</td>
							<td><ul class="keywords">
								<li><a href="javascript:void(0)">Ocean</a></li>
								<li class="orange-keyword"><a href="javascript:void(0)">Sun</a></li>
							</ul></td>
							<td>12</td>
							<td>2010-08-17</td>
							<td>640.480</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-2" value="2"></td>
							<td>Ut enim ad minim</td>
							<td><ul class="keywords">
								<li class="purple-keyword">People</li>
							</ul></td>
							<td>15</td>
							<td>2010-04-14</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-3" value="3"></td>
							<td>Veniam</td>
							<td><ul class="keywords">
								<li>Sea</li>
								<li>Fish</li>
							</ul></td>
							<td>18</td>
							<td>2010-02-02</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-4" value="4"></td>
							<td>Quis nostrud exercitation ullamco</td>
							<td class="empty">(none)</td>
							<td>9</td>
							<td>2010-09-07</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-5" value="5"></td>
							<td>Laboris nisi ut aliquip</td>
							<td><ul class="keywords">
								<li>Ocean</li>
								<li>Bubble</li>
							</ul></td>
							<td>8</td>
							<td>2010-03-12</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-2" value="2"></td>
							<td>Ex ea commodo consequat</td>
							<td><ul class="keywords">
								<li class="purple-keyword">People</li>
								<li>Fish</li>
							</ul></td>
							<td>14</td>
							<td>2010-03-14</td>
							<td>640.480</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-3" value="3"></td>
							<td>Duis aute irure</td>
							<td><ul class="keywords">
								<li>Sea</li>
								<li>Bubble</li>
							</ul></td>
							<td>14</td>
							<td>2010-05-01</td>
							<td>640.480</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-4" value="4"></td>
							<td>Dolor in reprehenderit</td>
							<td class="empty">(none)</td>
							<td>54</td>
							<td>2010-06-18</td>
							<td>1024.768</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-5" value="5"></td>
							<td>In voluptate velit </td>
							<td><ul class="keywords">
								<li>Ocean</li>
							</ul></td>
							<td>22</td>
							<td>2010-06-30</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-1" value="1"></td>
							<td>Esse cillum</td>
							<td><ul class="keywords">
								<li><a href="javascript:void(0)">Ocean</a></li>
								<li class="orange-keyword"><a href="javascript:void(0)">Sun</a></li>
							</ul></td>
							<td>12</td>
							<td>2010-02-27</td>
							<td>640.480</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-2" value="2"></td>
							<td>Dolore eu fugiat nulla pariatur</td>
							<td><ul class="keywords">
								<li class="purple-keyword">People</li>
							</ul></td>
							<td>16</td>
							<td>2010-04-14</td>
							<td>640.480</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-3" value="3"></td>
							<td>Excepteur sint occaecat</td>
							<td><ul class="keywords">
								<li>Sea</li>
								<li>Fish</li>
								<li>Bubble</li>
							</ul></td>
							<td>19</td>
							<td>2010-07-12</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-4" value="4"></td>
							<td>Cupidatat non proident</td>
							<td class="empty">(none)</td>
							<td>18</td>
							<td>2010-08-21</td>
							<td>320.240</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
						<tr>
							<td class="th table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-5" value="5"></td>
							<td>Sunt in culpa</td>
							<td><ul class="keywords">
								<li>Ocean</li>
							</ul></td>
							<td>17</td>
							<td>2010-10-04</td>
							<td>640.480</td>
							<td class="table-actions">
								<a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a>
								<a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a>
							</td>
						</tr>
						
					</tbody>
				
				</table>
					
			</form></div>
		</section>
		
		<section class="grid_12">
			<div class="block-border"><form class="block-content form" name="table_form" id="table_form" method="post" action="">
				<h1>
					Grid view
					<a href="javascript:void(0)"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/plus-circle-blue.png" />" width="16" height="16"> add</a>
				</h1>
				
				<div class="block-controls">
					
					<ul class="controls-buttons">
						<li><a href="javascript:void(0)" title="Previous"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/navigation-180.png" />" width="16" height="16"> Prev</a></li>
						<li><a href="javascript:void(0)" title="Page 1"><b>1</b></a></li>
						<li><a href="javascript:void(0)" title="Page 2" class="current"><b>2</b></a></li>
						<li><a href="javascript:void(0)" title="Page 3"><b>3</b></a></li>
						<li><a href="javascript:void(0)" title="Page 4"><b>4</b></a></li>
						<li><a href="javascript:void(0)" title="Page 5"><b>5</b></a></li>
						<li><a href="javascript:void(0)" title="Next">Next <img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/navigation.png" />" width="16" height="16"></a></li>
						<li class="sep"></li>
						<li><a href="javascript:void(0)"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/arrow-circle.png" />" width="16" height="16"></a></li>
					</ul>
					
				</div>
				
				<div class="with-head no-margin">
					
					<div class="head">
						<div class="black-cell with-gap"><span class="success"></span></div>
						<div class="black-cell">Sort by</div>
						<div>
							<span class="column-sort">
								<a href="javascript:void(0)" title="Sort up" class="sort-up active"></a>
								<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
							</span>
							Name
						</div>
						<div>
							<span class="column-sort">
								<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
								<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
							</span>
							Date
						</div>
						<div>
							<span class="column-sort">
								<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
								<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
							</span>
							Status
						</div>
					</div>
					
					<ul class="grid dark-grey-gradient">
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-1" value="1"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-2" value="2"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-3" value="3"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-4" value="4"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-5" value="5"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-6" value="6"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-7" value="7"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-8" value="8"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-9" value="9"></li>
							</ul>
						</li>
						
						<li>
							<div class="grid-picto user">
								<small>Administrator</small>
								<p class="grid-name">John Doe</p>
								<p class="grid-details">Age: <b>28</b><br>
								Gender: <b>male</b><br>
								Country: <b>USA</b></p>
							</div>
							<ul class="grid-actions">
								<li><a href="javascript:void(0)" title="Edit" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/pencil.png" />" width="16" height="16"></a></li>
								<li><a href="javascript:void(0)" title="Delete" class="with-tip"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></a></li>
								<li><input type="checkbox" name="selected[]" id="grid-selected-10" value="10"></li>
							</ul>
						</li>
						
					</ul>
					
				</div>
				
				<ul class="message no-margin">
					<li>Results 1 - 10 out of 47</li>
				</ul>
				
				<div class="block-footer">
					<div class="float-right">
						<label for="table-display" style="display:inline">Display mode</label>
						<select name="table-display" id="table-display" class="small">
							<option value="table">Table</option>
							<option value="grid" selected="selected">Grid</option>
						</select>
					</div>
					
					<img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/arrow-curve-000-left.png" />" width="16" height="16" class="picto">
					<a href="javascript:void(0)" class="button">Select All</a>
					<a href="javascript:void(0)" class="button">Unselect All</a>
					<span class="sep"></span>
					<select name="table-action" id="table-action" class="small">
						<option value="">Action for selected...</option>
						<option value="validate">Validate</option>
						<option value="delete">Delete</option>
					</select>
					<button type="submit" class="small">Ok</button>
				</div>
					
			</form></div>
		</section>
		
	</article>
</body>